<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>将原生事件绑定到组件</title>
    <!-- Delete ".min" for console warnings in development -->
    <script src="../vue.js"></script>

  </head>
  <body>

    <!-- app -->
    <div id="app">自定义事件 — Vue.js<br />
      https://cn.vuejs.org/v2/guide/components-custom-events.html<br />
      <br />
      将原生事件绑定到组件</br >
      
      <br />
      <base-input label="姓名" v-model="lovingVue" v-on:focus="onFocus"></base-input>
      <br /><br />
      <div>{{lovingVue}}</div>
    </div>

    <script>

// 定义一个新组件
Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` 将所有的对象合并为一个新对象
      return Object.assign({},
        // 我们从父级添加所有的监听器
        this.$listeners,
        // 然后我们添加自定义监听器，
        // 或覆写一些监听器的行为
        {
          // 这里确保组件配合 `v-model` 的工作
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `
})

var app = new Vue({
  el: '#app',
  data : {
    lovingVue : '特郎普'
  },
    methods:{
      'onFocus':function(){
        console.log('on focus');
        console.log(this);
        console.log(this.$listeners);
        console.log(this.$attrs);
      }
    }
})


    </script>
  </body>
</html>
